CSS property - margin

Definitie

De margin is transparent en neemt dus de achtergrondkleur aan van het parent element.

De margin eigenschap voegt witruimte aan de buitenkant van een element toe en creëert op die manier witruimte tussen de elementen.

Kantlijnen kan je individueel instellen:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;

Je kan ook marges met een steno-eigenschap instellen:

margin: 1em 2em 0.5em 3em;

Als alle marges gelijk moeten zijn, kan je deze eenvoudige stijlregel gebruiken:

margin: 1em;

Als de bovenkantlijn en de rechterkantlijn gelijk zijn aan de onderkantlijn en de linkerkantlijn:

margin: 1em 2em;

Gebruik

We kunnen dit nu toepassen op de bloemlezing.

We hebben al een paar keer aangegeven dat we met de universele selector alle marges en opvullingen op 0 instellen.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Als we de pagina in de browser laten zien, merken we dat er geen witruimte meer is tussen de paragrafen en ook geen rechterkantlijn:

Open het voorbeeld in CodePen en verander de margin instellingen:

1. margin: 1em 2em 0.5em 3em;
2. margin: 1em;
3. margin: 1em 2em;